<script setup lang="ts">
import tree from '@/assets/images/misc/tree.png'
import tree4 from '@/assets/images/misc/tree-4.png'
import pose from '@/assets/images/3d-characters/pose-2.png'
import sharkLogo from '@/icons/shark-logo.svg?component'
import {toRefs} from "vue";
import {useI18n} from "vue-i18n";

interface SharkProps {
  token: number,
}

const props = withDefaults(defineProps<SharkProps>(), {
  token: 0
})

const {token} = toRefs(props)

const {t} = useI18n()
</script>

<template>
  <v-card>
    <v-row class="ma-0 pa-0">
      <v-col
        cols="8"
        sm="6"
      >
        <shark-logo class="ml-2"></shark-logo>
        <v-card-text class="flex flex-column text-[#736B7D] px-1">
          <span class="text-sm font-semibold">{{ t('message.dashboard.shark') }}</span>
          <span class="text-no-wrap text-[22px] font-semibold mt-2">{{ token }}</span>
        </v-card-text>
      </v-col>

      <v-col
        cols="4"
        sm="6"
      >
        <v-img
          width="120"
          :src="tree4"
          class="gamification-tree-4"
        ></v-img>
        <img
          width="122"
          :src="pose"
          class="gamification-john-pose-2"
        />
        <v-img
          width="100"
          :src="tree"
          class="gamification-tree"
        ></v-img>
      </v-col>
    </v-row>
  </v-card>
</template>

<style lang="scss" scoped>
.gamification-tree-4,
.gamification-john-pose-2,
.gamification-tree {
  position: absolute;
}

.gamification-tree {
  top: 10%;
  right: 0;
}

.gamification-john-pose-2 {
  bottom: 0;
  right: 15%;
}

.gamification-tree-4 {
  bottom: 0;
  right: 30%;
}

@media (max-width: 600px) {
  .gamification-tree,
  .gamification-tree-4 {
    display: none;
  }
  .gamification-john-pose-2 {
    right: 5%;
  }
}

@media (max-width: 500px) {
  .gamification-john-pose-2 {
    max-width: 70px;
  }
}

@media (max-width: 400px) {
  .greeting-title {
    font-size: 1.2rem !important;
  }
}

// rtl
.v-application {
  &.v-application--is-rtl {
    .gamification-john-pose-2 {
      right: initial;
      left: 15%;
    }

    .gamification-tree {
      right: initial;
      left: 0;
    }

    .gamification-tree-4 {
      left: 30%;
      right: initial;
    }
  }
}
</style>

